<template>
  <div class="wl-wrapper">
    <el-input
      v-model="name"
      :size="size"
      suffix-icon="el-icon-search"
      :placeholder="placeholder || '人员单选'"
      readonly
      :disabled="disabled"
      @click="handleSelect"
    ></el-input>
    <!-- 选择弹窗 -->
    <nf-radio-select
      ref="material-select"
      :check-type="checkType"
      :default-checked="modelValue"
      checkType="radio"
      @onConfirm="handleSelectConfirm"
    ></nf-radio-select>
  </div>
</template>
<script>
import NfRadioSelect from '../../nf-radio-select/index.vue';

export default {
  name: 'radio-select',
  components: { NfRadioSelect },
  emits: ['update:modelValue'],
  props: {
    modelValue: [String, Number, Object],
    checkType: {
      // radio单选 checkbox多选
      type: String,
      default: () => {
        return 'radio';
      },
    },
    size: {
      type: String,
      default: () => {
        return 'default';
      },
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: String,
    change: Function,
  },

  data() {
    return {
      name: '',
    };
  },

  watch: {
    modelValue: {
      handler(val) {
        if (val) {
          this.name = this.modelValue.realName;
        } else this.name = '';
      },
      immediate: true,
    },
  },

  methods: {
    handleSelect() {
      if (this.readonly || this.disabled) return;
      this.$refs['material-select'].visible = true;
    },
    handleSelectConfirm(list) {
      this.name = list[0].realName;
      this.$emit('update:modelValue', list[0]);
      if (this.change && typeof this.change == 'function') this.change({ value: list[0] });
    },
  },
};
</script>
<style lang="scss" scoped>
.wl-wrapper {
  display: flex;
  align-items: center;
  .organization {
    margin-right: 20px;
  }
}
</style>
